<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
	<link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body>
<div class="header">Chào mừng bạn đến với Bigson</div>
<div class="main">
<% if @showLogin : %>
	<div class="form-login ">
		<div class="open-id">
			<p>Chào bạn!</p>
			<p>Hãy cho tôi một vài thông tin về bạn để tôi có thể sẵn sàng giúp bạn! ;)</p>
			<ul class="list-oi">
				<li>google</li>
				<li>facebook</li>
			</ul>
			<div class="div-open-id"><span>hoặc</span></div>
		</div>
		<form class="basic-login" method="POST">
			<p>Tên hoặc số điện thoại</p>
			<p><input type="text" name="username" value="<%- @username %>"></p>
			<p>Mật khẩu</p>
			<p><input type="password" name="password"></p>
			<p><input type="submit" name="login" value="Chat"></p>
			<p><input type="submit" name="save" value="Save"></p>
		</form>
	</div>
<% else : %>
	<div class="form-chat">
		<div class="wrap-login">
			<div class="wrap-chat" id='wrapChat'>

			</div>
			<div class="text-message">
				<textarea id="textMessage" onkeydown="onsend()"></textarea>
			</div>
		</div>
	</div>
<script type="text/javascript" src="/static/js/socket.io.min.js"></script>
<script>
	var socket = io.connect('http://io.schat.vn:3001'),
		messageBox = document.querySelector('#textMessage'),
		displayMessage = document.querySelector('#wrapChat');

	socket.on('c_receive', function (data) {
		console.log(data);
		displayMessage.innerHTML += data.message+'<br>';
	})
	.on('error', function (data) {
	console.log(data);
	});

	function onsend(e){
		e = e || window.event;
		var charCode = e.keyCode || e.which;
	    if (charCode == 13) {
	        // alert("Enter");
	        socket.emit('s_receive', { message : this.value, time : new Date().getTime(), targetId : 113112353826500700});
	        this.value = '';
	    }
	}
</script>
<% end %>
</div>
<div class="footer">
	<a class="copyright" href="#">Powered by Bigson</a>
</div>
</body>
</html>